iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 462 瀏覽

鐵人賽 Modern Web DAY 29

30 days of React 系列第 29 篇

技術 Day 29 - React useEffect cleanup function 練習：製作電子時鐘

昨天我們學習了副作用相關的知識，並嘗試使用useEffect完成了一個小練習，但還沒有使用到cleanup function。今天要透過實作的練習來學習Clea...

yuu ‧ 2023-10-14 ‧團隊好想工作室 v7.0

0 Like 0 留言 285 瀏覽

鐵人賽 Modern Web DAY 28

30 days of React 系列第 28 篇

技術 Day 28 - React useEffect 基礎：Focus a field on mount 實作練習

今天讀完了 React 官方文件的 Synchronizing with Effects 的章節，初步學習了 Effects 的相關知識，透過實作來練習和理解觀...

yuu ‧ 2023-10-13 ‧團隊好想工作室 v7.0

0 Like 0 留言 304 瀏覽

鐵人賽 Modern Web DAY 27

30 days of React 系列第 27 篇

技術 Day 27 - React Ref 實作練習

今天讀了官方文件 Ref 相關的二篇文章，內容是 Referencing 和透過 Ref 操作 DOM，來透過實作練習看看。改變影片播放速度的練習現有程式碼...

yuu ‧ 2023-10-12 ‧團隊好想工作室 v7.0

0 Like 0 留言 395 瀏覽

鐵人賽 Modern Web DAY 26

30 days of React 系列第 26 篇

技術 Day 26 - React 基礎實作練習：追加購物清單

今天要來製作購物清單，透過這個練習我們可以複習 Lifting State Up 的觀念。先來看目前的程式碼： App.js import React fr...

yuu ‧ 2023-10-11 ‧團隊好想工作室 v7.0

0 Like 0 留言 692 瀏覽

鐵人賽 Modern Web DAY 25

30 days of React 系列第 25 篇

技術 Day 25 - React 基礎實作練習：下拉式選單

今天要來練習做下拉式選單選擇國家。目前我們的程式碼已經有基礎的樣式。需要讓下拉式選單的功能正常運作。目前有的程式碼： import React from...

yuu ‧ 2023-10-10 ‧團隊好想工作室 v7.0

0 Like 0 留言 515 瀏覽

鐵人賽 Modern Web DAY 24

30 days of React 系列第 24 篇

技術 Day 24 - React 基礎實作練習：輸入授權碼

React 官方文件目前已結束第三章，進入最後一個章節的學習前，最後幾天的鐵人賽以實作的練習來複習所學習過的內容吧。今天要來練習輸入授權碼的表單製作。要讓使用者...

yuu ‧ 2023-10-09 ‧團隊好想工作室 v7.0

0 Like 0 留言 747 瀏覽

鐵人賽 Modern Web DAY 23

30 days of React 系列第 23 篇

技術 Day 23 - prop drilling 和 context

今天來學習如何使用 context 來解決 prop drilling 的問題。今天會學習的內容為：了解什麼是 prop drilling context...

yuu ‧ 2023-10-08 ‧團隊好想工作室 v7.0

0 Like 0 留言 467 瀏覽

鐵人賽 Modern Web DAY 22

30 days of React 系列第 22 篇

技術 Day 22 - Reducer 的應用

今天要來學習的 Reducer 的應用，主要內容為 Reducer 的操作步驟。較複雜的事件處理器隨著程式越來越複雜，我們可能會遇到下面這樣的情況像是在...

yuu ‧ 2023-10-07 ‧團隊好想工作室 v7.0

0 Like 0 留言 479 瀏覽

鐵人賽 Modern Web DAY 21

30 days of React 系列第 21 篇

技術 Day 21 - 保存和重置 state

昨天學了元件間如何共用 state，今天要來看如何保存和重置 state。今天的內容： UI 樹中的位置在相同的位置的相同元件在相同位置的不同元件在相...

yuu ‧ 2023-10-06 ‧團隊好想工作室 v7.0

0 Like 0 留言 421 瀏覽

鐵人賽 Modern Web DAY 20

30 days of React 系列第 20 篇

技術 Day 20 - 在元件間共用 state

學習完 state 構築的原則，來進一步看 state 的應用，今天要學習如何在元件間共用 state 來達到更精準的控制權責關係。我們會透過一個手風琴（Acc...

yuu ‧ 2023-10-05 ‧團隊好想工作室 v7.0

0 Like 0 留言 356 瀏覽

鐵人賽 Modern Web DAY 19

30 days of React 系列第 19 篇

技術 Day 19 - 構築 state 的原則

學習完聲明式 UI 的思考及操作，接著要更深入來思考構築 state 的原則，官方文件提供了五個原則給使用者參考，讓我們一一來看。將相關的狀態群組（Grou...

yuu ‧ 2023-10-04 ‧團隊好想工作室 v7.0

0 Like 0 留言 457 瀏覽

鐵人賽 Modern Web DAY 18

30 days of React 系列第 18 篇

技術 Day 18 - 聲明式 UI 的思考及操作

鐵人賽過半，終於進入到處理表單，官方文件顯示我們已經從 Beginner 進入 Intermediate 的程度，連續地寫作比想像中的還要疲勞，作業 BGM 也...

yuu ‧ 2023-10-03 ‧團隊好想工作室 v7.0

0 Like 0 留言 239 瀏覽

鐵人賽 Modern Web DAY 17

30 days of React 系列第 17 篇

技術 Day 17 - 在 state 中更新陣列

今天要學習如何在 state 中操作陣列的更新，在 JavaScript 當中陣列是 mutable，但當我們在 React 中處理 array 時應該將它們視...

yuu ‧ 2023-10-02 ‧團隊好想工作室 v7.0

0 Like 0 留言 283 瀏覽

鐵人賽 Modern Web DAY 16

30 days of React 系列第 16 篇

技術 Day 16 - 在 state 中更新物件

昨天學習了 React 的 batching 的概念、「替代」和「做」的區別、當次渲染的邏輯，今天要來學習如何在 state 中更新物件。學習前讓我們再次回憶起...

yuu ‧ 2023-10-01 ‧團隊好想工作室 v7.0

0 Like 0 留言 456 瀏覽

鐵人賽 Modern Web DAY 15

30 days of React 系列第 15 篇

技術 Day 15 - React 渲染：排隊任務

目前我們掌握了 React 渲染的機制，也就是渲染會經過的三個階段，也了解到在 re-rendering 的過程中發生了什麼事情。還沒完，今天要來學習「排隊任務...

yuu ‧ 2023-09-30 ‧團隊好想工作室 v7.0

0 Like 0 留言 563 瀏覽

鐵人賽 Modern Web DAY 14

30 days of React 系列第 14 篇

技術 Day 14 - React 的渲染機制以及 state 的過程

先前我們在補充中有稍微提到 Reac 的渲染機制，今天將更深入地學習 React 的渲染是怎麼一回事。渲染的三階段當我們在 React 當中組織了元件，並將...

yuu ‧ 2023-09-29 ‧團隊好想工作室 v7.0

0 Like 0 留言 388 瀏覽

鐵人賽 Modern Web DAY 13

30 days of React 系列第 13 篇

技術 Day 13 - 在React中使用state

今天要來學習state的應用，內容包含：認識state 操作方法 stateHook 什麼是state? 如何理解 state，字面上的意思就是當前的程式...

yuu ‧ 2023-09-28 ‧團隊好想工作室 v7.0

0 Like 0 留言 586 瀏覽

鐵人賽 Modern Web DAY 12

30 days of React 系列第 12 篇

技術 Day 12 - 在React 處理事件（下）

接著來學習在React當中處理事件，主要會提到React當中的事件傳遞機制，內容如下： React當中的事件傳遞停止事件傳遞 React當中的捕獲預防預設...

yuu ‧ 2023-09-27 ‧團隊好想工作室 v7.0

0 Like 0 留言 502 瀏覽

鐵人賽 Modern Web DAY 11

30 days of React 系列第 11 篇

技術 Day 11 - 在React處理事件（上）

今天要學習如何在React中處理事件，以下是今天會提到的內容：如何設定事件處理器如何在事件處理器當中讀取props屬性資料將事件處理器作為props 傳...

yuu ‧ 2023-09-26 ‧團隊好想工作室 v7.0

0 Like 0 留言 299 瀏覽

鐵人賽 Modern Web DAY 10

30 days of React 系列第 10 篇

技術 Day 10 - 保持元件純淨

今天要來學習在設計元件時有哪些要點，以及如何避免寫出「不乾淨」的元件。純淨的元件製作元件時的大重點：保持元件的純淨 (Keeping Components...

yuu ‧ 2023-09-25 ‧團隊好想工作室 v7.0

0 Like 0 留言 350 瀏覽

鐵人賽 Modern Web DAY 9

30 days of React 系列第 9 篇

技術 Day 9 - key

昨天我們在製作電影卡片元件，雖然畫面看起來沒問題但編輯器跳出了🚨 這個是什麼意思呢？在React中當我們使用到array item時，應該給每一個array i...

yuu ‧ 2023-09-24 ‧團隊好想工作室 v7.0

0 Like 0 留言 430 瀏覽

鐵人賽 Modern Web DAY 8

30 days of React 系列第 8 篇

技術 Day 8 - 渲染清單

昨天我們透過條件式渲染讓電影清單能夠依據電影名稱顯示相對應的資料，也能直接在object中新增資料來維護，但這還差一點，這還沒有達到毋須修改元件結構自動渲染。今...

yuu ‧ 2023-09-23 ‧團隊好想工作室 v7.0

0 Like 0 留言 399 瀏覽

鐵人賽 Modern Web DAY 6

30 days of React 系列第 6 篇

技術 Day 6 - 傳遞Props

今天進入props的學習，會討論以下的議題：什麼是props 如何使用props 將JSX作為props傳遞什麼是props 在 React 中，pro...

yuu ‧ 2023-09-21 ‧團隊好想工作室 v7.0

0 Like 0 留言 341 瀏覽

鐵人賽 Modern Web DAY 5

30 days of React 系列第 5 篇

技術 Day 5 - 建立元件之間的聯繫：匯出與引入

上一篇學習了基礎的元件使用，那麼元件之間該如何串聯，一起使用呢？今天要來學習：匯出與引入如何運作匯出元件的二種方法匯出與引入元件我們可以透過匯出（e...

yuu ‧ 2023-09-20 ‧團隊好想工作室 v7.0

0 Like 0 留言 591 瀏覽

鐵人賽 Modern Web DAY 4

30 days of React 系列第 4 篇

技術 Day 4 - React 元件初探

今天要來學習元件，要探索的內容有： React component簡介如何創建component 如何使用component 瀏覽器如何認知 React...

yuu ‧ 2023-09-19 ‧團隊好想工作室 v7.0

0 Like 0 留言 434 瀏覽

鐵人賽 Modern Web DAY 3

30 days of React 系列第 3 篇

技術 Day 3 - JSX的花括號

昨天我們談了基礎的JSX的規則，這次我們來看看JSX當中的花括號是怎麼使用的呢？今天會討論到的議題：使用花括號的功能如何理解花括號 double花括號的使...

yuu ‧ 2023-09-18 ‧團隊好想工作室 v7.0

0 Like 0 留言 484 瀏覽

鐵人賽 Modern Web DAY 2

30 days of React 系列第 2 篇

技術 Day 2 - 理解 JSX

今天來學習JSX，主要學習的內容為：理解JSX是什麼使用JSX的原因 JSX的運作如何使用JSX JSX是什麼在談JSX 前，先談談componen...

yuu ‧ 2023-09-17 ‧團隊好想工作室 v7.0

0 Like 0 留言 531 瀏覽

鐵人賽 Modern Web DAY 1

30 days of React 系列第 1 篇

技術 Day 1 - 系列簡介

前言這是30天的React初學者在沒有學過其他框架的背景下進行的學習過程紀錄，請當作一般的學習筆記來閱讀。預備知識為HTML、CSS以及JavaScript。...

yuu ‧ 2023-09-16 ‧團隊好想工作室 v7.0